a {
    text-decoration: none !important;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

.all-page {
    display: flex !important;
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
}

.all-page-v {
    display: flex;
    width: 100%;
    justify-content: center;
}
.login-form {
    display: flex;
    flex-direction: column;
    margin-left: 114px;
}
.login-image {
    display: flex;
    object-fit: cover;
    width: 100%;
}

.login-image img {
    width: 50%;
    height: 92vh;
    display: block;
    margin: 0 auto;
    position: fixed;
    margin-top: 80px;
}

.title {
    margin-left: -47px;
}

.title h1 {
    color: #011627;
    font-family: Plus Jakarta Sans;
    font-size: 33px;
    font-style: normal;
    font-weight: 700;
    line-height: 135%;
    /* text-transform: uppercase; */
    margin-top: 150px;
    display: flex;
    justify-content: center;
    margin-left: 163px;
    align-items: center;
    text-wrap: nowrap;
}

.title span {
    color: #7f56d9;
    font-family: Plus Jakarta Sans;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 135%;
    /* text-transform: uppercase; */
}
.login {
    color: #1c1d18;
    font-family: Plus Jakarta Sans;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 44px;
    letter-spacing: -0.8px;
    margin-top: 25px;
}

.content-login {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
}

.all-content-login {
    display: flex;
    /* width: 100%; */
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
    justify-content: center;
    margin: 0 auto;
}

.content-login .email,
.content-login .password {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    position: relative;
}
.content-login .password i {
    position: absolute;
    top: 55px;
    right: 17px;
}
.content-login .email label,
.content-login .password label {
    color: #344054;
    font-family: Plus Jakarta Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    color: #344054;
    font-family: Plus Jakarta Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.content-login .email input,
.content-login .password .passwordIn {
    display: flex;
    height: 50px;
    padding: 10px 14px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    color: var(--gray-500, #1c1d18);
    font-family: Plus Jakarta Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    border-radius: 8px;
    border: 1px solid var(--gray-300, #d0d5dd);
    background: var(--base-white, #fff);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    padding-left: 40px;
}

.login-button button {
    all: unset;
}
.login-button {
    display: flex;
    width: 100%;
    height: 50px;
    padding: 10px 18px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--primary-600, #7f56d9);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    color: var(--base-white, #fff);
    font-family: Plus Jakarta Sans;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    cursor: pointer;
}

.password .remember-forgot {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
}
.password .remember-forgot .remember {
    display: flex;
    width: 255px;
    align-items: flex-start;
    gap: 12px;
}

.form {
    width: 100%;
}

.password .remember-forgot .remember h1 {
    align-self: stretch;
    color: var(--gray-700, #344054);
    font-family: Plus Jakarta Sans;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    margin-top: 6px;
}

.password .remember-forgot .forgot {
    color: #7f56d9;
    font-family: Plus Jakarta Sans;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    margin-top: 9px;
    white-space: nowrap;
}

.register-with-social {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

.register-with-social h1 {
    color: #667085;
    font-family: Plus Jakarta Sans;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-top: -10px;
}

.register-with-social .line {
    width: 95px;
    height: 1px;
    background: #667085;
}

.icons {
    display: flex;
    width: 216.5px;
    height: 40px;
    justify-content: center;
    align-items: center;
    gap: 52.5px;
    flex-shrink: 0;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

.go-login {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

.go-login h1 {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

.go-login h1 {
    color: #667085;
    font-family: Plus Jakarta Sans;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 100% */
}

.go-login h1 span {
    color: var(--primary-700, #6941c6);
    font-family: Plus Jakarta Sans;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 100% */
    display: flex;
    width: 77px;
    height: 30px;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    outline-style: hidden;
}

.email,
.password,
.password_confirmation {
    position: relative;
}

.error-message {
    color: #e10c18;
    font-family: Plus Jakarta Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}
.error-message-all {
    margin-bottom: 25px;
    margin-top: -37px;
    margin-left: -32px;
}
.correct-icon {
    position: absolute;
    right: 14px;
    top: 58%;
}

.password .correct-icon,
.password_confirmation .correct-icon {
    position: absolute;
    right: 32px;
    top: 60%;
}

.text-start {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
}

.btn.dropdown-toggle {
    width: 100% !important;
}

#passwordToggle {
    cursor: pointer;
}

.password .i {
    position: absolute;
    top: 51px;
    right: 12px;
    cursor: pointer;
}

.passwordIcon {
    position: absolute;
    top: 50px;
    left: 14px;
}

.emailIcon {
    position: absolute;
    top: 56px;
    left: 14px;
}

.footer {
    color: var(--gray-600, #475467);
    font-family: Plus Jakarta Sans;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 111.111% */
    margin-left: -73px;
    margin-top: 77px;
    margin-left: -75%;
    margin-bottom: 30px;
}

.login-button:hover {
    background: #1b1c17;
    cursor: pointer;
}

.icons svg:hover path:nth-child(1) {
    fill: #000000;
    cursor: pointer;
}

a:hover span {
    color: #1b1c17;
}

.password .remember-forgot .forgot:hover {
    color: #1b1c17;

}

.login-image .tab,
.login-image .mobile {
    display: none;
    width: 100%;
    position: relative;
}

.handDrawn {
    position: absolute;
    top: 86%;
    left: 12%;
}

/* @media (min-width: 1800px) {
    .all-content-login {
        margin: 0 150px;
    }

    .title h1 {
        margin-left: 45px;
    }
} */

@media (max-width: 1100px) {
    .title h1 {
        margin-top: 70px;
        margin-left: 34px;
    }

    .login-form {
        margin-left: 0;
    }
}

@media (min-width: 1100px) and (max-width: 1400px) {
    .text-start {
        /* transform: scale(0.8); */
        margin-top: 40px;
        margin-bottom: -130px;
    }
}

@media (min-width: 500px) and (max-width: 1100px) {
    .all-page-v {
        flex-direction: column-reverse !important;
    }

    .text-start {
        /* transform: scale(0.7); */
        margin-top: -75px;
        margin-bottom: -150px;
    }

    .img-desktop {
        display: none !important;
    }
    .login-image .tab {
        display: flex !important;
    }

    .login-image img {
        height: unset !important;
        position: unset !important;
        margin-top: 37px !important;
        width: 100% !important;
    }

    .handDrawn {
        position: absolute;
        top: 81%;
        left: 4%;
        transform: scale(0.65);
    }
}
@media (min-width: 300px) and (max-width: 500px) {
    .password .remember-forgot .remember {
        width: 224px;
        white-space: nowrap;
        gap: 0;
        max-width: max-content;
    }

    .title h1 {
        /* margin-left: 0; */
        width: 80%;
        font-size: 27px;
    }
    .title h1 {
        /* margin-left: 0; */
        width: 80%;
        font-size: 27px;
        font-size: 21px !important;
        margin-left: 50px;
    }
    
    .title span {
        font-size: 23px;
    }
    .login-image img {
        height: unset !important;
        position: unset !important;
        margin-top: 47px !important;
        width: 100% !important;
    }

    .all-page-v {
        flex-direction: column-reverse !important;
    }

    .text-start {
        /* transform: scale(0.7); */
        margin-top: -50px;
        margin-bottom: -150px;
    }

    .img-desktop {
        display: none !important;
    }

    .login-image .tab {
        display: none !important;
    }

    .login-image .mobile {
        display: flex !important;
    }
}

@media (max-width: 650px) {
    .footer {
        margin-left: -56%;
    }

    .title {
        scale: .8; 
    }

}

@media (min-width: 500px) and (max-width: 900px) {
    .img-desktop {
        display: none !important;
    }

    .login-image .tab {
        display: none !important;
    }

    .login-image .mobile {
        display: flex !important;
    }
}

@media (min-width: 600px) and (max-width: 1100px) {
    .login-image img {
        margin-top: 77px !important;
    }
}

@media (min-width: 500px) and (max-width: 600px) {
    .login-image img {
        margin-top: 60px !important;
    }
}
@media (max-width: 500px) { 
    .go-login h1 {
        white-space: nowrap;
        font-size: 19px;
        gap: 0px;
    }
    .error-message { 
        font-size: 14px; 
    }
    .password .remember-forgot { 
        gap: 6px; 
    }
    a:hover span {
        color: #FFDA44;
    }
    .title {
        scale: 1; 
    }
}

@media (max-width: 420px) {
    .text-start {
        transform: scale(0.87);
        margin-top: -105px;
    } 

    .text-start {
        transform: scale(0.85);
        margin-top: -105px;
        transform-origin: left top;
        margin: 0 !important;
        min-width: 117%;
    }
}

@media (min-width: 300px) and (max-width: 400px) {
    .title {
        margin-left: 0 !important;
    }
    .title h1 {
        width: 93% !important;
        font-size: 21px !important;
        display: flex !important;
        justify-content: center;
        margin-left: 0;
        white-space: nowrap;
        align-items: center;
    }

    .register-with-social {
        transform: scale(0.8) !important;
        width: 130% !important;
        margin-left: -48px !important;
    }

    
}

@media (min-width: 300px) and (max-width: 375px) {
    .password .remember-forgot .forgot {
        font-size: 13px;
    }

    .password .remember-forgot .remember h1 {
        font-size: 14px;
    }
}